<template>
	<view :class="config.style">
		<!-- 未登录弹出提示信息 -->
		<uni-popup id="dialogInput" ref="dialogLogin" type="center">
			<view class="login-popup" >
				<view class="title">
					您还没有登录
				</view>
				<view class="description">
					请登录后进行操作
				</view>

				<form @submit="login">
					<!-- #ifdef MP-WEIXIN -->
					<view class="avatar-section">
						<input type="hidden" name="avatar" v-model="avatar" style="display: none;"/>
						<view class="avatar">
							<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								<image class="image" :src="avatarUrl"></image>
							</button>
						</view>
					</view>
					<view class="nickname-section">
						<view class="title">昵称</view>
						<input type="nickname" name="nickname" class="uni-input" maxlength="60" placeholder="请输入昵称" v-model="nickname"/>
					</view>
					<!-- #endif -->
					
					<view class="login-btn">
						<button type="default" form-type="submit" class="button" hover-class="hover">立即登录</button>
					</view>
					
					<!-- #ifndef MP-WEIXIN -->
					<view class="cancel-btn">
						<button class="button" @click="cancelLogin()">暂不登录</button>
					</view>
					<!-- #endif -->
				</form>
			</view>
		</uni-popup>
		
		<!-- 隐私协议 -->
		<!-- #ifdef MP-WEIXIN --> 
		<!-- 显示在底部 -->
		<privacy-popup ref="privacyComponent" position="bottom" :config="config"></privacy-popup> 
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		name: 'Login',
		props: {
			config: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				userInfo: {},
				// 昵称
				nickname : '',
				// 相对路径
				avatar: '',
				// 完整路径
				avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
			}
		},
		created() {
			
		},
		methods: {
			
			/**
			 * 打开输入popup提交信息
			 */
			loginDialog() {
				this.$refs.dialogLogin.open()
			},
			/**
			 * 执行登录操作
			 */
			login(e) {
				//console.log(e)
				let that = this
				//#ifdef MP
				this.avatar = e.detail.value.avatar
				this.nickname = e.detail.value.nickname
				
				if(this.avatar == ''){
					uni.showToast({
						title: '头像未设置',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				if(this.nickname == ''){
					uni.showToast({
						title: '昵称未填写',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				
				this.util.login(function(res){
					// 关闭登录框
					that.cancelLogin()
					// 上传头像至服务器
					that.uploadWeixinMpAvatar(that.avatarUrl).then((avatarRes) => {
						//console.log(avatarRes)
						const item = JSON.parse(avatarRes[1].data);
						//console.log(item)
						
						that.avatar = item.attachment
						that.avatarUrl = item.url
						
						Promise.all([that.updateAvatar(),that.updateNickname()]).then(res => {
							// 更新父组件数据
							that.$emit('getData')
							that.getUserInfo()
							that.getApiUserInfo().then(res => {
								that.$emit('getUserInfo')
							})
						})
					})
				}, that.util.m);
				// #endif
				
				//#ifdef H5
				console.log(e)
				if(this.util.isWechat()){
					// TODO:微信浏览器端默认网页授权登录，这里暂无需处理
					that.util.login()
				}else{
					// 其它浏览器端
					let url = '/common/pages/ucenter/login'
					uni.navigateTo({
						url: url
					});
				}
				//#endif
			},
			
			onChooseAvatar(e) {
				const { avatarUrl } = e.detail
				this.avatarUrl = avatarUrl
				this.avatar = avatarUrl
				console.log(avatarUrl)
			},
			
			/**
			 * 头像保存至服务器
			 * @param {Object} filePath
			 */
			uploadWeixinMpAvatar(filePath) {

				// 不传success,fail时返回promise对象
				//#ifdef MP-WEIXIN
				let url = this.util.url('entry/wxapp/file',{
					m: this.util.m,
					action: 'upload'
				})
				//#endif
				return uni.uploadFile({
					url: url,
					filePath: filePath,
					fileType: 'image',
					name: 'file',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'X-Requested-With': 'XMLHttpRequest',
					}
				})
			},
			
			updateAvatar() {
				let that = this
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/ucenter'
					//#endif
					//#ifdef H5
					url = 'entry/site/ucenter'
					//#endif
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data: {
							'action': 'avatar',
							'avatar': that.avatar,
						},
						method: 'POST',
						success: function (res) {
							if (res.data.code == 200) {
								resolve(res.data)
							}else{
								reject()
							}
						}
					})
				})
			},
			
			updateNickname() {
				let that = this
				
				//提交数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/ucenter'
					//#endif
					//#ifdef H5
					url = 'entry/site/ucenter'
					//#endif
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data: {
							'action': 'nickname',
							'nickname': that.nickname,
						},
						method: 'POST',
						success: function (res) {
							if (res.data.code == 200) {
								resolve(res.data)
							}else{
								reject()
							}
						}
					})
				})
			},
			
			/**
			 * 获取已登录用户数据
			 */
			getUserInfo() {
				let userInfo = uni.getStorageSync('userInfo') || {}
				if(Object.keys(userInfo).length > 0){
					this.userInfo = userInfo
				}else{
					this.userInfo = {}
					this.getApiUserInfo()
				}
			},
			
			/**
			 * 获取用户详情数据
			 */
			getApiUserInfo() {
				let that = this
				let data = {}
					data.action = 'user_info'
					data.m = this.util.m
				//动态获取用户数据
				let url = ''
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/ucenter'
					//#endif
					//#ifdef H5
					url = 'entry/site/ucenter'
					//#endif
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.userInfo.sessionid = that.userInfo.sessionid
								that.userInfo.memberInfo = res.data.data
								uni.setStorageSync('userInfo', that.userInfo)
							}
							resolve(res)
						}
					})
				})
			},
			
			/**
			 * 关闭弹出框
			 */
			cancelLogin() {
				this.$refs.dialogLogin.close()
			}
			
		}
	}
</script>

<style lang="scss">
	.login-popup {
		background-color: #fff;
		padding: 60rpx;
		border-radius: 20rpx;
		width: 440rpx;
		.title {
			text-align: center;
			font-size: 36rpx;
			font-weight: 600;
		}
		.description {
			text-align: center;
			font-size: 28rpx;
			color: #999;
			margin-bottom: 60rpx;
		}
		.login-btn {
			margin-bottom: 20rpx;
			button {
				
			}
		}
		.cancel-btn {
			
		}
		/* 微信小程序端获取头像昵称 */
		.avatar-section {
			.avatar {
				padding: 2rpx 0 40rpx 0;
				.avatar-btn {
					border: 0;
					padding: 0;
					width: 120rpx;
					height: 120rpx;
					margin: 0 auto;
					border-radius: 10rpx;
					.image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 10rpx;
					}
				}
			}
		}
		.nickname-section {
			position: relative;
			padding: 20rpx;
			.title {
				position: absolute;
				top: 40rpx;
				left: 20rpx;
			}
			.uni-input {
				padding: 20rpx 0;
				padding-left: 120rpx;
				border-top: 2rpx solid #eee;
				border-bottom: 2rpx solid #eee;
			}
		}
	}
	.Blue {
		.login-popup {
			.login-btn {
				.button {
					color: #fff;
					background-color: $Blue;
				}
				.hover {
					background-color: $Blue-hover;
				}
			}
		}
	}
	.Green {
		.login-popup {
			.login-btn {
				.button {
					color: #fff;
					background-color: $Green;
				}
				.hover {
					background-color: $Green-hover;
				}
			}
		}
	}
	.LightRed {
		.login-popup {
			.login-btn {
				.button {
					color: #fff;
					background-color: $LightRed;
				}
				.hover {
					background-color: $LightRed-hover;
				}
			}
		}
	}
	.Orange {
		.login-popup {
			.login-btn {
				.button {
					color: #fff;
					background-color: $Orange;
				}
				.hover {
					background-color: $Orange-hover;
				}
			}
		}
	}
	.LightPink {
		.login-popup {
			.login-btn {
				.button {
					color: #fff;
					background-color: $LightPink;
				}
				.hover {
					background-color: $LightPink-hover;
				}
			}
		}
	}
	.Magenta {
		.login-popup {
			.login-btn {
				.button {
					color: #fff;
					background-color: $Magenta;
				}
				.hover {
					background-color: $Magenta-hover;
				}
			}
		}
	}
</style>
